<template>
<view class="container">
  <mvBar :mysNavConfig="mysNavConfig"></mvBar>
  <view class="form-panel">
    <view class="title">发票详情</view>
    <view class="invoice-form">
      <view class="invoice-form-item" >
        <view class="invoice-form-label">抬头类型</view>
        <view class="invoice-form-val">
          <radio-group @change="onChosedType">
            <label><radio :value="1" color="#006241" :checked="currentType === 1" style="transform: scale(0.7)"></radio>企业单位</label>
            <label><radio :value="2" color="#006241" :checked="currentType === 2" style="transform: scale(0.7)"></radio>个人/非企业单位</label>
          </radio-group>
        </view>
      </view>
      <view v-if="currentType === 1">
        <view class="invoice-form-item">
          <view class="invoice-form-label">公司名称</view>
          <view class="invoice-form-val">
            <uni-easyinput v-model="formData.buyerName" :inputBorder="false" placeholder="请输入" placeholderStyle="text-align:right" ></uni-easyinput>
          </view>
        </view>
        <view class="invoice-form-item">
          <view class="invoice-form-label">公司税号</view>
          <view class="invoice-form-val val-text">
            <uni-easyinput v-model="formData.buyerTaxpayerNum" :inputBorder="false" placeholder="请输入" placeholderStyle="text-align:right" ></uni-easyinput>
          </view>
        </view>
        <view class="invoice-form-item">
          <view class="invoice-form-label">注册地址</view>
          <view class="invoice-form-val val-text">
            <uni-easyinput v-model="formData.buyerAddress" :inputBorder="false" placeholder="请输入" placeholderStyle="text-align:right" ></uni-easyinput>
          </view>
        </view>
        <view class="invoice-form-item">
          <view class="invoice-form-label">注册电话</view>
          <view class="invoice-form-val val-text">
            <uni-easyinput v-model="formData.buyerTel" :inputBorder="false" placeholder="请输入" placeholderStyle="text-align:right" ></uni-easyinput>
          </view>
        </view>
        <view class="invoice-form-item">
          <view class="invoice-form-label">开户银行</view>
          <view class="invoice-form-val val-text">
            <uni-easyinput v-model="formData.buyerBankName" :inputBorder="false" placeholder="请输入" placeholderStyle="text-align:right" ></uni-easyinput>
          </view>
        </view>
        <view class="invoice-form-item">
          <view class="invoice-form-label">银行账号</view>
          <view class="invoice-form-val val-text">
            <uni-easyinput v-model="formData.buyerBankAccount" :inputBorder="false" placeholder="请输入" placeholderStyle="text-align:right" ></uni-easyinput>
          </view>
        </view>
      </view>
      <view v-else>
        <view class="invoice-form-item">
          <view class="invoice-form-label">抬头名称</view>
          <view class="invoice-form-val">
            <uni-easyinput v-model="formData.email" :inputBorder="false" placeholder="请输入" placeholderStyle="text-align:right" ></uni-easyinput>
          </view>
        </view>
      </view>


<!--      <view class="title">接收方式</view>-->
      <view class="invoice-form-item" style="margin-top: 20rpx;">
        <view class="invoice-form-label">设为默认抬头</view>
        <view class="invoice-form-val val-text">
          <switch color="#006241"  style="transform:scale(0.8)"/>
        </view>
      </view>
    </view>
  </view>
  <view class="confirm-btn" @click="confirm">保存并返回</view>
</view>
</template>

<script>

import mvBar from "@/components/mysNavBar.vue";
import {saveInvoiceTitle} from "@/api";
export default {
  name: "index",
  components: {mvBar},
  data(){
    return{
      isEmpty: false,
      isLoading: true,
      currentType: 1,
      mysNavConfig: {
        navPadding: true,
        isHome: false,
        navFixed: true,
        navTitle: {
          text: "我的发票抬头",
          color: "#1B1B1B",
          fontSize: "34upx", // px upx rpx
          fontWeight: "500", // blod
        },
        leftIconPath: '/static/header/back-b.png'
      },
      formData:{
        "buyerName": "",
        "buyerTaxpayerNum": "",
        "buyerAddress": "",
        "buyerTel": "",
        "buyerBankName": "",
        "buyerBankAccount": "",
        "defaultFlag": 0,
      },
      slideOptions: [{
        text: '删除',
        style: {
          backgroundColor: '#dd524d'
        }
      }],
    }
  },
  methods:{
    choseInfo(){
      this.$refs.popup.open()
    },
    onClose(){
      this.$refs.popup.close()
    },
    onChosedType(evt){
      const v = evt.detail.value
      this.currentType = v*1
      console.log(this.currentType)
    },
    async confirm() {
      if (this.formData.buyerName && (this.formData.buyerTaxpayerNum || this.currentType === 2)){
        uni.showLoading({	title: '保存中'});
        const data = {
          ...this.formData,
          opInvoiceType: this.currentType
        }
        const { code } = await saveInvoiceTitle({...data})
        if (code === 200){
          uni.hideLoading();
          uni.showToast({title: '保存成功', icon: 'success', duration: 2000})
          setTimeout(()=>{
            uni.navigateBack(0)
          },2000)
        }
      }else {
        uni.showToast({title: '请完善发票抬头信息', icon: 'error'})
      }
      // {
      //   "buyerAddress": "string",
      //     "buyerBankAccount": "string",
      //     "buyerBankName": "string",
      //     "buyerName": "string",
      //     "buyerTaxpayerNum": "string",
      //     "buyerTel": "string",
      //     "defaultFlag": 0,
      //     "memberId": "string",
      //     "opInvoiceType": 0
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  background: #F7F7F7;
  padding-bottom: 160upx;
  .flex-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .popup-content{
    border-radius: 24upx 24upx 0 0 ;
    height: 840upx;
    overflow-y: scroll;
    position: relative;
    //padding-top: 106upx;
    .title{
      position: sticky;
      top: 0;
      left: 0;
      padding: 32upx;
      width: 100%;
      z-index: 1;
      box-sizing: border-box;
      background: #FFFFFF;
      text{
        font-size: 28upx;
        color: #1B1B1B;
        font-weight: 500;
      }
    }
    .emptyPanel{
      text-align: center;
      padding-top: 160upx;
      image{
        width: 200upx;
        height: 200upx;
        margin-bottom: 16upx;
      }
      .emptyText{
        color: #9D9D9D;
        font-size: 28upx;
      }
      .setBtn{
        margin: 16upx auto;
        width: 140upx;
        font-size: 24upx;
        padding: 14upx 24upx;
        border-radius: 8upx;
        border: 1px solid #006241;
        color: #006241;
      }
    }
    .panel{
      padding-bottom: 140upx;
      position: relative;
      .info-item{
        padding: 10upx 32upx;
        box-shadow: 0px -0.5px 0px 0px #0000001A inset;
        .name{
          font-size: 32upx;
          color: #1B1B1B;
        }
        .type{
          font-size: 24upx;
          color: #9D9D9D;
        }
      }
      .add-btn{
        position: absolute;
        left: 50%;
        bottom: 16upx;
        width: 700upx;
        line-height: 80upx;
        background: #006241;
        border-radius: 60upx;
        color: #FFFFFF;
        text-align: center;
        transform: translateX(-50%);
      }
    }
  }
  .confirm-btn{
    position: fixed;
    left: 50%;
    bottom: 80upx;
    width: 700upx;
    line-height: 80upx;
    background: #006241;
    border-radius: 60upx;
    color: #FFFFFF;
    text-align: center;
    transform: translateX(-50%);
  }
  .form-panel{
    .title{
      padding: 24upx;
      font-size: 28upx;
      color: #9D9D9D;
    }
    .invoice-form{
      .invoice-form-item {
        box-sizing: border-box;
        padding: 32upx 24upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #FFFFFF;
        box-shadow: 0px -0.5px 0px 0px #0000001A inset;
        font-size: 32upx;
        font-weight: 400;
        .invoice-form-label{
          min-width: 200upx;
          color: #1B1B1B;
        }
        .invoice-form-val{
          width: 100%;
          font-size: 28upx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          label{
            margin-left: 16upx;
          }
          .icon{
            margin-left: 12upx;
          }
        }
        .val-text{
          font-size: 34upx;
          //color: #9D9D9D;
        }
        .total-price{
          width: 100%;
          justify-content: space-between;
          .price{
            color: #1B1B1B;
            text{
              margin-right: 12upx;
              color: #F57546;
            }
          }
        }
      }
    }
  }
}
</style>